<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{width: 100px; height: 100px; background-color: red;position: absolute;left: 400px;top: 200px}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');

		oDiv.onmouseover = function (){
			doMove(this, {'width': 200, 'height': 200, 'marginLeft': -50, 'marginTop': -50});
		};
		oDiv.onmouseout = function (){
			doMove(this, {'width': 100, 'height': 100, 'marginLeft': 0, 'marginTop': 0})
		}
	}

	function doMove(obj, json, endFn){
		clearInterval(obj.timer);

		obj.timer = setInterval(function (){
			var bStop = true;
			var iCur = 0;
			
			for (var attr in json){

				if (attr == 'opacity') {
					iCur = parseInt(parseFloat(getStyle(obj, attr))*100 );
				}else{
					iCur = parseInt(getStyle(obj, attr));
				};

				var iSpeed = (json[attr] - iCur)/8;
				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
				
				if (attr == 'opacity') {
					obj.style.opacity = (iCur + iSpeed)/100;
					obj.style.filter = 'alpha(opacity:'+ (iCur + iSpeed) +')';
				}else{
					obj.style[attr] = iCur + iSpeed + 'px';
				};

				if (iCur != json[attr]) {		//极有可能存在一个值到达而其他值没有达到的情况就清除定时器（启下）
					bStop = false;
				}
			}

			if (bStop) {						//(承上)，所以需要在循环外来判断全部到达才关闭定时器
				clearInterval(obj.timer);
				endFn && endFn();
			}
		},30)
	}

	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
	</script>
</head>
<body>
	<p>问题：会有点小抖，怎么解决？？？</p>
	<div id="div1"></div>
</body>
</html>